@extends('layouts.base')  

@section('style')
	<style>
		.d-title{font-size: 24px;}
		.order-number-box{display: flex;align-items: center;}
		.order-number-box .number-li{width: 25%;padding: 20px;border-radius: 10px;background-color: #F97B7C;margin: 0px 10px;}
		.number-li .desc{font-size: 18px;font-weight: 600;border-bottom: 1px solid #ECECEC;padding-bottom: 10px;color: #ffeb3b;}
		.number-li .nums{color: #FFFFFF;text-align: center;font-size: 32px;font-weight: 600;padding-top: 10px;}
	</style>	
@endsection


@section('content')
<section class="Hui-article-box">
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
		<span class="c-gray en">&gt;</span>系统首页	
	</nav>
	<div class="Hui-article">
		<article class="cl pd-20">
			
			<div class="app app-main-info" >
				<div class="header-desc">
					<span class="d-title">订单总览</span>
				</div>
				<div class="order-number-box">
					<div class="number-li">
						<div class="desc">今日订单数</div>
						<div class="nums"><span class="num" id="order-num-1" data-str="0" data-end="{{$todayNum}}" data-decimals='0' data-duration="2">0</span>&nbsp;&nbsp;单</div>	
					</div>
					<div class="number-li" style="background-color: #3598dc;">
						<div class="desc">今日订单总金额</div>
						<div class="nums"><span class="num" id="order-num-2" data-str="0" data-end="{{$todayMoney}}" data-decimals='2' data-duration="2">0</span>&nbsp;&nbsp;元</div>
					</div>
					<div class="number-li" style="background-color: #E67D21;">
						<div class="desc">历史订单数</div>
						<div class="nums"><span class="num" id="order-num-3" data-str="0" data-end="{{$totalNum}}" data-decimals='0' data-duration="3">0</span>&nbsp;&nbsp;单</div>	
					</div>
					<div class="number-li" style="background-color: #28a745;">
						<div class="desc">历史订单总金额</div>
						<div class="nums"><span class="num" id="order-num-4" data-str="0" data-end="{{$todayMoney}}" data-decimals='2' data-duration="3">0</span>&nbsp;&nbsp;元</div>
					</div>
				</div>
			</div>



		</article>
	</div>
</section>
@endsection


@section('script')

<script src="/js/countUp/count.js"></script>
<script>
/**
target = 目标元素的 ID；
startVal = 开始值；
endVal = 结束值；
decimals = 小数位数，默认值是0；
duration = 动画延迟秒数，默认值是2；
 */
var arr =[];
$('.order-number-box .number-li').each(function(i, dom) {
		var iDom = $(dom).find('.num'),
			decimals = iDom.attr('data-decimals'),
			sum = iDom.attr('data-end'),
			duration = iDom.attr('data-duration');
		//初始化传参，参数为上面注释中的参数    
		arr.push(new CountUp(iDom.attr('id'), 0, sum, decimals, duration, {
			useEasing: true,//效果
			separator: ''//数字分隔符
		}));
		arr[i].start();
	});
</script> 	

@endsection
